<template>
	<div class="gui-container">
		<el-dialog v-model="isShowDialog" title="新增柜子" width="860px">
			<el-card shadow="hover" body-style="padding:8px; ">
				<el-form :model="ruleForm" size="small" label-width="130px">
					<el-row>
						<el-col :span="12" :sm="12" :md="12" :lg="12" :xl="10" class="mb20">
							<el-form-item label="柜子类型">
								<el-select v-model="ruleForm.cabinetCode" placeholder="请选择...">
									<el-option v-for="item in options.gzlxs" :key="item.value" :label="item.label" :value="item.value"> </el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12" :sm="12" :md="12" :lg="12" :xl="10" class="mb20">
							<el-form-item label="柜子编号">
								<el-input v-model="ruleForm.no" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12" :sm="12" :md="12" :lg="12" :xl="10" class="mb20">
							<el-form-item label="柜子名称">
								<el-input v-model="ruleForm.name" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12" :sm="12" :md="12" :lg="12" :xl="10" class="mb20">
							<el-form-item label="是否为智能柜">
								<el-select v-model="ruleForm.smart" placeholder="请选择">
									<el-option :value="true" label="是"></el-option>
									<el-option :value="false" label="否"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12" :sm="12" :md="12" :lg="12" :xl="10" class="mb20">
							<el-form-item label="箱子体积(kg)">
								<el-input-number v-model="ruleForm.volume" :precision="2" clearable></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :span="12" :sm="12" :md="12" :lg="12" :xl="10" class="mb20">
							<el-form-item label="箱子容量（个）">
								<el-input-number v-model="ruleForm.total" :precision="0" clearable></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :span="12" :sm="12" :md="12" :lg="12" :xl="10" class="mb20" v-show="ruleForm.cabinetCode == '1'">
							<el-form-item label="固定列">
								<el-select v-model="ruleForm.fixedColumn" placeholder="请选择...">
									<el-option value="1" label="左"></el-option>
									<el-option value="2" label="右"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12" :sm="12" :md="12" :lg="12" :xl="10" class="mb20" v-show="ruleForm.cabinetCode == '1'">
							<el-form-item label="列数">
								<el-input-number v-model="ruleForm.columns" :min="1" />
							</el-form-item>
						</el-col>
						<el-col :span="12" :sm="12" :md="12" :lg="12" :xl="10" class="mb20">
							<el-form-item label="模块号">
								<el-input v-model="ruleForm.moduleNo" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12" :sm="12" :md="12" :lg="12" :xl="10" class="mb20" v-show="ruleForm.smart == true">
							<el-form-item label="开柜模式">
								<el-select v-model="ruleForm.modelCode" placeholder="请选择">
									<el-option value="1" label="COM"></el-option>
									<el-option value="2" label="网口"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12" :sm="12" :md="12" :lg="12" :xl="10" class="mb20" v-show="ruleForm.smart == true">
							<el-form-item label="COM口/http地址">
								<el-input v-model="ruleForm.addr" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12" :sm="12" :md="12" :lg="12" :xl="10" class="mb20">
							<el-form-item label="排序">
								<el-input-number v-model="ruleForm.orderBy" clearable></el-input-number>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-card>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="ckSubmitData">保存</el-button>
					<el-button @click="isShowDialog = false">取消</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { initDic } from '/@/common';
import { queryById, save } from '/@/api/store/cabinet';

export default {
	components: {},
	emits: ['reload'],
	setup(props, { emit }) {
		const state = reactive({
			isShowDialog: false,
			id: 0,
			options: { gzlxs: [] },
			ruleForm: {
				id: 0,
				cabinetCode: '',
				cabinetName: '',
				no: '',
				name: '',
				smart: false,
				volume: 0.0,
				total: 100,
				fixedColumn: '1',
				columns: 10,
				moduleNo: '',
				modelCode: '',
				addr: '',
				areaId: 0,
				orderBy: 0,
			},
		});

		initDic(state.options);
		async function ckSubmitData() {
			state.ruleForm.cabinetName = state.options.gzlxs.find((x) => x.value == state.ruleForm.cabinetCode)?.label;
			await save(state.ruleForm).then((res: any) => {
				if (res.success) {
					emit('reload');
					ElMessage({ message: '操作成功', type: 'success' });
					state.isShowDialog = false;
				} else {
					ElMessage({ message: '操作失败', type: 'error' });
				}
			});
		}

		const openDialog = (aid: number, obj: any) => {
			state.ruleForm.areaId = aid;
			state.isShowDialog = true;
			state.ruleForm.cabinetCode = '';
			state.ruleForm.cabinetName = '';
			state.ruleForm.no = '';
			state.ruleForm.name = '';
			state.ruleForm.smart = false;
			state.ruleForm.volume = 0;
			state.ruleForm.total = 100;
			state.ruleForm.fixedColumn = '1';
			state.ruleForm.columns = 10;
			state.ruleForm.moduleNo = '';
			state.ruleForm.modelCode = '';
			state.ruleForm.addr = '';
			state.ruleForm.orderBy = 0;

			if (obj) {
				state.id = obj.id;
				Object.assign(state.ruleForm, obj);
			}
		};

		//查询所有区域
		async function query() {
			if (state.id > 0) {
				await queryById(state.id).then((res: any) => {
					if (res.success) {
						state.ruleForm = res.data;
					}
				});
			}
		}

		return {
			openDialog,
			ckSubmitData,
			...toRefs(state),
		};
	},
};
</script>
<style scoped>
/deep/.el-overlay .el-dialog .el-dialog__body {
	--height: 380px;
}
.el-col {
	border: 0px solid red;
}
.el-form-item,
.el-select,
.el-date-picker {
	width: 100%;
}
</style>
